<template>
      <div class="page" style="display: flex; justify-content: center">
        <div class="pdfModelBox">
          <div class="pdfCon" ref="pdfCon" >
            <!--问卷渲染展示-->

              <div v-for="(item,index) in modelList" :key="index">

              <div v-if="item.medolType == 1" >
                <el-card class="box-card2" shadow="hover" >
                  <!--题目设置 题签标定-->
                  <template #header>
                    <div class="card-header">
                      <h2>题目{{ index + 1 }}</h2>
                      <div class="choice">
                        <el-tag
                          class="ml-2"
                          type="success"
                          style="
                            text-align: center;
                            margin-top: 5px;
                            width: 50px;
                          "
                          >单选题</el-tag
                        >
                        <span style="width: 20px"></span>
                        <el-input
                          v-model="item.subject"
                          style="height:40px;width:100px"
                        />
                      </div>

                    </div>
                  </template>
                  <!--选项设置 功能键实施-->
                  <div class="my-4 flex items-center text-sm" style="display:flex">
                    <el-radio-group>
                      <div  v-for="(items,indexs) in item.option" :key="indexs" class="ml-4">
                          <el-radio label="1" size="large" v-model="items.value" style="text-align: center;margin-top: 5px;width: 250px;">{{ letter[indexs] }}、{{items}}</el-radio>
                      </div>
                  </el-radio-group>
                  </div>
                  <div style="height: 5px"></div>
               </el-card>
               </div>
              <div v-if="item.medolType == 2">
                <el-card class="box-card2" shadow="hover">
                  <!--题目设置 题签标定-->
                  <template #header>
                    <div class="card-header">
                      <h2>题目{{ index + 1 }}</h2>
                      <div class="choice">
                        <el-tag
                          class="ml-2"
                          style="
                            text-align: center;
                            margin-top: 5px;
                            width: 50px;
                          "
                          >多选题</el-tag
                        >
                        <span style="width: 20px"></span>
                        <el-input
                          v-model="item.subject"
                          style="height=40px"
                        />
                      </div>
                    </div>
                  </template>
                  <!--选项设置 功能键实施-->
                  <div class="my-4 flex items-center text-sm" >
                    <el-radio-group >
                      <div v-for="(items,indexs) in item.option" :key="indexs" class="ml-4" style="display:flex">
                          <el-radio label="1" size="large" v-model="items.value" type="vertical" style="text-align: center;margin-top: 5px;width: 250px;">
                          {{ letter[indexs] }}、{{items}}
                          </el-radio>
                      </div>
                    </el-radio-group>
                  </div>
                  <div style="height: 5px"></div>
                </el-card>
              </div>
              <div v-if="item.medolType == 3">
                <el-card class="box-card2" shadow="hover">
                  <!--题目设置 题签标定-->
                  <template #header>
                    <div class="card-header">
                    <h2>题目{{ index + 1 }}</h2>
                      <div class="choice">
                        <el-tag
                          class="ml-2"
                          type="warning"
                          style="
                            text-align: center;
                            margin-top: 5px;
                            width: 50px;
                          "
                          >填空题</el-tag
                        >
                        <span style="width: 20px"></span>
                        <el-input
                          v-model="item.subject"
                          style="height=40px"
                        />
                      </div>

                    </div>
                  </template>
                  <!--选项设置 功能键实施-->
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    v-model="items.option[0].value"
                  >
                  </el-input>
                </el-card>
              </div>

            </div>
            </div>
        </div>
      </div>

</template>

<script>
export default {
  name: "PreviewSurvey",
  data(){
    return{
      sid:'',
      modelList:[],
      items:[],
      form: {
        surveyName: "",
        createDate: "",
    },
      letter: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    }
  },
  methods:{
    loadData(){
        this.$axios.post("/survey-base/preview",{
          param:{
            id : this.sid
          }
        }).then(res=>{
          res = res.data;
          if(res.code == 200){
            this.modelList = res.data;
            // const index = 0;
            // for(const i=0;i<this.modelList.length;i++){
            //   this.items[index++] = this.modelList[i].options;
            // }
            // console.log(this.items);
            console.log(this.modelList)
            console.log(this.modelList[0].subject)
          } else{
            alert('获取数据失败')
          }
        })
    },
  },
  created(){
    //console.log(this.$route.query.sid);
    this.sid = this.$route.query.sid;
    //console.log(this.sid);
    this.loadData();

  }
}
</script>

<style scoped>
.page {
  width: 100%;
  height: 110vh;
  position: relative;
  background: #ffffff;
}
.pdfModelBox {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}
.pdfCon {
  width: 70%;
  height: 80%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);
  margin: 0 auto;
  overflow: auto;
  overflow-x: hidden;
  background: #f5f5f5;
  padding-bottom: 40px;
  display:inline;
}
.label {
  max-width: 80px;
  max-height: 30px;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.choice {
  display: flex;

}
.box-card1 {
  max-width: 100px;
}
.box-card2 {
  width: 100%;
}
.el-radio{
  display: block;
  line-height: 23px;
  white-space: normal;
  margin-right: 0;
}
</style>